import React, { Component } from 'react'
import { InputItem, Modal, Toast } from 'antd-mobile'
import { NavBar, Item, Icon, Button } from 'components'
import { formatPriceStr } from '../../methods'
import './Putforward.less'
import { post } from '../../../../utils'

export default class Putforward extends Component<any, any> {

    public state = {
        type: (this.props.userBalanceSelectBank) ? 3 : 1, // 提现方式， 选择银行回到这个页面，此时type为2
        putforwardMoney: '', // 提现金额
        userName: '', // 姓名
        userAccount: '', // 账号
        selectModal: false, // 模态框显示隐藏
    }

    public render (): JSX.Element {
        const { putforwardMoney, selectModal, type, userName, userAccount } = this.state
        const { userBalanceSelectBank, userInfo } = this.props
        return (
            <div className="putforward">
                <NavBar title={<div style={{fontSize: '0.97rem', color: '#222'}}>提现</div>} fixed={true} />
                <Item 
                    onPress={() => {this.showModal('selectModal')}}
                    className="putforward_item" 
                    title={<div className="putforward_item_title">提现类型</div>} 
                    value={<div className="putforward_item_value">
                        {
                            (type === 1) 
                            ? <React.Fragment>
                                <Icon 
                                    type="weChat" 
                                    className="putforward_selectPay_content_item_title_wxIcon" 
                                /> 
                                <span>微信</span>
                                <Icon type="arrow_right" />
                            </React.Fragment> 
                            : null
                        }
                        {
                            (type === 2) 
                            ? <React.Fragment>
                                <Icon 
                                    type="aliPay_circle" 
                                    className="putforward_selectPay_content_item_title_aliIcon" 
                                /> 
                                <span>支付宝</span>
                                <Icon type="arrow_right" />
                            </React.Fragment> 
                            : null
                        }
                        {
                            (type === 3) 
                            ? <React.Fragment>
                                <Icon 
                                    type="blankcard" 
                                    className="putforward_selectPay_content_item_title_blankcardIcon" 
                                /> 
                                <span>银行卡</span>
                                <Icon type="arrow_right" />
                            </React.Fragment> 
                            : null
                        }
                        
                    </div>}
                />
                <Item
                    className="putforward_inputitem" 
                    title={<div className="putforward_inputitem_title">姓名</div>} 
                    value={<div className="putforward_inputitem_value">
                        <input type="text" placeholder="收款人姓名" value={userName} onChange={this.handleUserName} />
                    </div>}
                />
                <Item
                    className="putforward_inputitem" 
                    title={<div className="putforward_inputitem_title">账户名称</div>} 
                    value={<div className="putforward_inputitem_value">
                        <InputItem
                            className="putforward_inputitem_value_input"
                            type={(type !== 3) ? 'text' : 'bankCard'}
                            placeholder={
                                (type === 1) 
                                ? '微信账户/手机号'
                                : (type === 2) ? '支付宝账户/手机号' : '银行卡卡号'
                            } 
                            value={userAccount}
                            onChange={this.handleAccount} 
                        />
                    </div>}
                />
                {
                    (type === 3) 
                    ? <Item
                        onPress={() => {this.goToUrl('/My/bank')}}
                        className="putforward_inputitem" 
                        title={<div className="putforward_inputitem_title">银行</div>} 
                        value={<div className="putforward_inputitem_value putforward_inputitem_selectBank"><span>{(userBalanceSelectBank) ? userBalanceSelectBank : '请选择银行'}</span><Icon type="arrow_right" /></div>}
                    />
                    : null
                }
                <div className="putforward_content">
                    <div className="putforward_content_title">提现金额</div>
                    <div className="putforward_content_inputWrap">
                        <div>￥</div>
                        <div>
                            <InputItem
                                value={putforwardMoney}
                                defaultValue={putforwardMoney}
                                className="putforward_content_inputWrap_input"
                                maxLength={5}
                                clear={(putforwardMoney.length > 0) ? true : false}
                                onChange={this.handleInputChange}
                            />
                        </div>
                        {
                            (putforwardMoney.length > 0) 
                            ? <div/>
                            : <div onClick={this.handleInputAll}>全部</div>
                        }
                    </div>
                    <div className="putforward_content_balance">可用余额 {userInfo && formatPriceStr(userInfo.balance.toString())}元</div>
                </div>
                <div className="putforward_btnWrap">
                    <Button className="putforward_btnWrap_btn" disabled={this.handleDisableBtn()} onClick={this.handlePay}>确认提现</Button>
                </div>
                <Modal
                    className="putforward_selectPay_modal"
                    popup={true}
                    visible={selectModal}
                    onClose={() => {this.hiddenModal('selectModal')}}
                    animationType="slide-up"
                >
                    <div className="putforward_selectPay_content">
                        <div className="putforward_selectPay_content_title">
                            <div className="flex_center">选择提现方式</div>
                            <div className="flex_center">
                                <Icon type="arrow_left" onClick={() => {this.hiddenModal('selectModal')}} />
                            </div>
                        </div>
                        <Item 
                            onPress={() => {this.handleSelectPayWay(1)}}
                            className="putforward_selectPay_content_item" 
                            title={<div className="putforward_selectPay_content_item_title">
                                <Icon type="wxPay" className="putforward_selectPay_content_item_title_wxIcon" />
                                <div>微信</div>
                            </div>} 
                            value={<div className="putforward_selectPay_content_item_value">
                                {
                                    (type === 1) 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>} 
                        />
                        <Item 
                            onPress={() => {this.handleSelectPayWay(2)}}
                            className="putforward_selectPay_content_item" 
                            title={<div className="putforward_selectPay_content_item_title">
                                <Icon type="aliPay_circle" className="putforward_selectPay_content_item_title_aliIcon" />
                                <div>支付宝</div>
                            </div>} 
                            value={<div className="putforward_selectPay_content_item_value">
                                {
                                    (type === 2) 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>} 
                        />
                        <Item 
                            onPress={() => {this.handleSelectPayWay(3)}}
                            className="putforward_selectPay_content_item" 
                            title={<div className="putforward_selectPay_content_item_title">
                                <Icon type="blankcard" className="putforward_selectPay_content_item_title_blankcardIcon" />
                                <div>银行卡</div>
                            </div>} 
                            value={<div className="putforward_selectPay_content_item_value">
                                {
                                    (type === 3) 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>} 
                        />
                    </div>
                </Modal>
            </div>
        )
    }
    private handlePay = () => {
        const { userInfo } = this.props
        const { type, userAccount, putforwardMoney } = this.state
        post('usersapi/userCashAdd', {
            userId: userInfo.id,
            number: userAccount,
            price: putforwardMoney,
            type: type
        }).then((data: any) => {
            Toast.info('提现成功！', 2, () => {this.props.history.goBack()})
        })
    }
    private handleInputAll = () => {
        const { userInfo } = this.props
        this.setState({
            putforwardMoney: userInfo.balance
        })
    }
    private handleAccount = (val: any) => {
        // const val = e.target.value
        this.setState({
            userAccount: val
        })
    }
    private handleUserName = (e: any) => {
        const val = e.target.value
        this.setState({
            userName: val
        })
    }
    private hiddenModal = (key: string) => {
        this.setState({
            [key]: false
        })
    }
    private showModal = (key: string) => {
        this.setState({
            [key]: true
        })
    }
    private handleSelectPayWay = (type: number) => {
        this.setState({
            type,
            selectModal: false,
            userAccount: '',
            userName: '',
            putforwardMoney: ''
        })
    }
    private handleInputChange = (val: string) => {
        let value = val
        const { userInfo } = this.props
        if (val && (parseInt(value, 10) > parseInt(userInfo.balance, 10))) {
            value = userInfo.balance
        }
        this.setState({
            putforwardMoney: value
        })
    }
    private handleDisableBtn = () => {
        const { userBalanceSelectBank } = this.props
        const { userName, userAccount, putforwardMoney, type } = this.state
        if (type === 1 || type === 2) {
            if (userAccount !== '' && userName !== '' && putforwardMoney !== '') {
                return false
            }
            return true
        }
        if (type === 3) {
            if (userAccount !== '' && userName !== '' && putforwardMoney !== '' && userBalanceSelectBank !== '') {
                return false
            }
            return true
        }
        return false
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }

}